<template>
  <div class="chooser-component">
    <ul>
      <li
          class="chooser-item"
          v-for="(item, index) in selections"
          :title="item.label" @click="chosenSelection(index)"
          :class="{ active: nowIndex === index, 'no-choose': index > noChoose}">
        <div>
          {{item.label}}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'VChooser',
    props: {
      selections: {
        type: [Array, String],
        default: 'none'
      },
      stages: {
        type: [Number, String],
        default: 3
      },
      isReset: {
        type: Boolean,
        default: false
      },
      noChoose: {
        type: [Number, String],
        default: 4
      }
    },
    data () {
      return {
        nowIndex: 0,
        installmentNowIndex: null,
        index: 0
      }
    },
    methods: {
      chosenSelection (index) {
        this.nowIndex = index
        this.installmentNowIndex = index
        this.$emit('on-change', this.selections[this.nowIndex])
        this.$emit('changes')
      }
    },
    watch: {
      isReset (newval, oldval) {
        if (newval !== oldval) this.nowIndex = 0
      },
      stages (val) {
        if (val === 0 || val === '0') {
          this.nowIndex = 0
        } else if (val === 3 || val === '3') {
          this.nowIndex = 1
        } else if (val === 6 || val === '6') {
          this.nowIndex = 2
        } else if (val === 9 || val === '9') {
          this.nowIndex = 3
        } else if (val === 12 || val === '12') {
          this.nowIndex = 4
        }
      }
    },
    mounted () {
      let val = this.stages
      if (val === 0 || val === '0') {
        this.nowIndex = 0
      } else if (val === 3 || val === '3') {
        this.nowIndex = 1
      } else if (val === 6 || val === '6') {
        this.nowIndex = 2
      } else if (val === 9 || val === '9') {
        this.nowIndex = 3
      } else if (val === 12 || val === '12') {
        this.nowIndex = 4
      }
    }
  }
</script>

<style scoped>
  .no-choose {
    border: 1px solid #E6E6E6!important;
    color: #A5A5A5!important;
    pointer-events: none;
  }
  .chooser-component ul {
    overflow: hidden;
  }

  .chooser-component li {
    float: left;
  }

  .chooser-item {
    height: 36px;
    border: 1px solid #ccc;
    margin-right: 12px;
    font-size: 14px;
    color: #333;
    padding: 0 13px;
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 10px;
  }
  .chooser-item.active {
    border: 1px solid #FF600A;
    background: url(../../assets/images/icon_check.png) no-repeat top right;
  }
  .chooser-item:hover {
    border: 1px solid #FF600A;
  }

  .chooser-item-forbid {
    height: 36px;
    border: 1px solid #ccc;
    margin-right: 12px;
    font-size: 14px;
    color: #333;
    padding: 0 13px;
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 10px;
  }

  .active-forbid {
    border: 1px solid #ccc !important;
    background: url(../../assets/images/icon_check_forbid.png) no-repeat top right !important;
  }
</style>
